<template>
  <div class="trackBox">
    <div class="searchBox">
      <a-range-picker
        :allowClear="true"
        v-model="rangePickerTime"
        valueFormat="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
        showTime
        @change="rangePickerChange"
        style="width: 69%"
      />
      <div style="margin-left: 10px">
        <a-button type="primary" @click="onQuery"> 查询 </a-button>
        <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
      </div>
    </div>
    <Map ref="mapDrawId" :isAddLine="true" />
    <ListDrawer ref="listDrawId" @searchMap="onSearchMap" @clickRow="onClickRow" />
  </div>
</template>

<script>
import ListDrawer from './components/listDrawer'
import Map from '@/views/xlgc/modules/map'
export default {
  components: {
    ListDrawer,
    Map
  },
  data() {
    return {
      rangePickerTime: [],
      timeObj: {}
    }
  },
  mounted() {
    // 设置地图容器的高度，使地图完成铺满
    let siderHeight = document.getElementsByClassName('ant-layout-sider')[0].offsetHeight
    document.getElementsByClassName('trackBox')[0].style.height = siderHeight + 'px'

    let info = JSON.parse(this.$route.query.info)
    let arr = [
      [
        {
          key: 0,
          address: info.position,
          longitude: info.longitude,
          latitude: info.latitude
        }
      ]
    ]
    this.$refs.mapDrawId.setMapData(arr)
  },
  methods: {
    // 告警更新时间
    rangePickerChange(date) {
      this.timeObj = {
        startTime: date[0],
        endTime: date[1]
      }
    },
    onQuery() {
      this.$refs.mapDrawId.clearOverlays()
      this.$refs.listDrawId.onSearch(this.timeObj)
    },
    onResetForm() {
      this.timeObj = {}
      this.rangePickerTime = []
      this.$refs.listDrawId.onSearch(this.timeObj)
    },
    onSearchMap(arr) {
      this.$refs.mapDrawId.setMapData(arr)
    },
    onClickRow() {}
  }
}
</script>

<style lang="less" scoped>
.searchBox {
  position: absolute;
  left: 20px;
  top: 10px;
  z-index: 100;
  display: flex;
}
/deep/.ant-checkbox-wrapper {
  padding: 6px 0 0 4px;
}
.ant-input-group-wrapper {
  width: 308px;
  margin-left: 10px;
}
.trackBox {
  position: relative;
  left: -10px;
  right: 0;
  top: -10px;
  bottom: 0;
  z-index: 10;
  height: 100vh;
  overflow: hidden;
  /deep/span.BMap_Marker {
    img {
      display: none !important;
    }
  }
  /deep/.ant-drawer-content-wrapper {
    height: 100% !important;
    top: 60px !important;
  }
  .breadcrumb-box {
    position: absolute;
    right: 20px;
    top: 7px;
    z-index: 10000;
  }
}
.map {
  .trackBox;
  top: 0;
  transition: all 0.3s;
  &.offset-x-30 {
    left: 30%;
  }
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100px);
  border-radius: 10px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  i {
    margin-right: 12px;
  }
}
.handle {
  position: absolute;
  display: inline-block;
  top: 60px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
